<template>
    <view>
		<!-- :style="{backgroundImage:'url('+imageURL+')'}" -->
       <view class="collect-bgimg" >
		   <text class="head-title">查漏补缺，提高刷题技巧</text>
		   <view class="head-con">
			   <view class="head-con-item">
				   <text>全部错题（题）</text>
				   <text>{{total}}</text>
			   </view>
			   
			   <view class="head-con-item2">
				   <text>已消灭错题（题）</text>
				   <text>{{right_num}}</text>
			   </view>
		   </view>
	   </view>
	   
        
        
        
		<view class="collect-content">
			<view class="main-title">
				<text>错题练习</text>
			</view>
			<u-empty v-if="list==''"
					mode="list"
					icon="https://shuati26.kptedu.com/uploads/image/data.png"
					text="哇哦,竟然没有错题,给你点个赞~"
					textColor="#666"
					width="300rpx"
					height="300rpx"
			>
			</u-empty>
			<view v-else v-for="(item, index) in list" :key="index" 
			 @tap="$openrul('/pagesa/my/examWrongQuestion/detail?id=' + item.id)"
			class="list-item"
			>
				<view style="display: flex;flex-flow: column wrap;">
					<view style="display: flex;flex-flow: row nowrap;align-items: center;">
						<image style="width: 10px;height: 10px;" src="../../../static/img/cdkey.png"></image>
						<view style="font-size: 30rpx;margin-left: 20rpx;">{{item.exam_name}}</view>
					</view>
					<text style="color: #9c9c9c;font-size: 25rpx;margin-top: 20rpx;margin-left: 40rpx;">共{{item.error_num}}题</text>
				</view>
				<image style="width: 15px;height: 15px;" src="../../../static/img/in.png"></image>
			</view>
		</view>	
		    
            
       
    </view>
</template>
<script>
import { mapState } from "vuex";
import noRecode from "@/components/no-recode.vue";
import Error from '@/core/untils/error/index';

export default {
  data() {
    return {
	  list:[],
	  total:'',
	  right_num:'',
	  type:'',
	  imageURL:'http://shuati26.kptedu.com/uploads/image/collectbgimg.png',
	  
    };
  },
  onLoad(opts) {
	
  },
  onShow() {
	  this.get_exam_error_list()
  },
  mounted() {},
  computed: {
    ...mapState(["subject", "userinfo"]),
  },
  components: {
  },
  methods: {
	async get_exam_error_list() {
		let res = await this.$myHttp.post({
			url: this.$myHttp.urlMap.exam_error_list,
			data: {
				subject_id:0,
				province:uni.getStorageSync('choose_cityName'),
			},
			needLogin: true
		})
		if (res.code == 1) {
			this.total = res.data.total
			this.right_num = res.data.right_num
			this.list=res.data.data
			
		}
	},
	
  }
};
</script>

<style>
    page {
        background: #f7f8fa;
    }
	.collect-bgimg {
	    height: 350rpx;
		width:100%;
		background-image: url('http://shuati26.kptedu.com/uploads/image/collectbgimg.png');
		background-size: 100% 100%;
		
	}
	.collect-bgimg:before{
		height: 350rpx;
		width:100%;
		background-image: url('http://shuati26.kptedu.com/uploads/image/collectbgimg.png') center 0 no-repeat;
		background-size:cover;
	}
	/* .collect-bgimg image{
		width: 100%;
		height: 100%;
		z-index: -10;
	} */
	.main-title {
	    padding: 30rpx 30rpx;
	    font-size: 34rpx;
	    color: #1C1C1C;
	    font-weight: 900;
		
	}
	.collect-content{
		margin-top: 50rpx;
	}
	.head-title{
		font-weight: 900;
		    font-size: 34rpx;
		    color: white;
		    margin: 20rpx 10rpx 10rpx 0rpx;
		   
		    position: absolute;
		    top: 60rpx;
		    left: 30rpx;
		
	}
	.head-con{
			position: absolute;
		    top: 200rpx;
		    display: flex;
		    flex-flow: row nowrap;
		    left: 60rpx;
		    display: flex;
		    justify-content: space-between;
		    width: 520rpx;
	}
	.head-con-item{
		display: flex;
		flex-flow: column wrap;
	}
	.head-con-item2{
		    display: flex;
		    flex-flow: column wrap;
		    border-left: outset;
		    padding-left: 20rpx;
		    height: 140rpx;
		    border-left-color: #f7f8fa;
	}
	.head-con>view>text:nth-child(1){
		font-size: 27rpx;
	}
	.head-con>view>text:nth-child(2){
		font-size: 50rpx;
	}
	
	/**/
	.kaoshi-tiku {
	  
	}
	.kaoshi-tiku-content {
	  width: 92%;
	  margin: 0 auto;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  font-size: 16px;
	  padding: 14px 0;
	  border-bottom: solid 1px #f5f5f5;
	  background: #ffffff;
	  border-radius: 10rpx;
	}
	.kaoshi-tiku-content-flex {
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.kaoshi-tiku-content>view:nth-child(1){
		padding-left: 20rpx;
	}
	
	.kaoshi-tiku-content .icon-arrow {
	  padding-right: 20rpx;
	  color: #b3b3b3;
	}
	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
	  padding-bottom: 6px;
	}
	.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
	  font-size: 14px;
	}
	.kaoshi-tiku-content-top {
	  display: flex;
	  align-items: center;
	}
	.kaoshi-tiku-content-top img {
	  width: 20px;
	  height: 22px;
	  margin-right: 10px;
	}
	.kaoshi-tiku-content-bottom {
	  display: flex;
	  align-items: center;
	}
	.kaoshi-tiku-content-flex .icon-dui2 {
	  margin: 2px 2px 0 0;
	  color: #3c7bfc;
	}
	.kaoshi-tiku-bilv {
	  font-size: 22px;
	  color: #000;
	  display: flex;
	  align-items: baseline;
	}
	.kaoshi-remind-title {
	  font-size: 13px;
	  color: #000;
	}
	.kaoshi-head-banner {
	        background: #fff;
	        border-radius: 5px;
	        width: 92%;
	        margin: 10px auto;
	        /* box-shadow: 0 0 10px rgba(208, 208, 208, 0.5); */
	        /* margin-bottom: 18px; */
	        padding: 16px 0 18px 0;
	    }
		.kaoshi-user-top-remind-b {
		    display: flex;
		    justify-content: center;
		    text-align: center;
		    font-size: 14px;
		    color: #c5c5c5;
		}
		
		.kaoshi-user-top-remind-b-view {
		    flex: 1;
		}
		.kaoshi-user-top-remind-b-title {
		    font-size: 18px;
		    color: #000;
		    padding: 4px 0 6px 0;
		}
		
		.kaoshi-remind-title {
		    font-size: 13px;
		    color: #000;
		}
		.kaoshi-user-top-remind-b-title-p{
		  font-size: 15px;
		}
		/* #ifdef MP-WEIXIN */
		.kaoshi-xcx {
		    background: #fddddd;
		    padding: 8px 0;
		}
		/* #endif */
		.kaoshi-user-top-remind-b-title-content {
		    display: flex;
		    align-items: baseline;
		    justify-content: center;
		}
	.list-item{
		display:flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		width: 90%;
		background-color: #ffffff;
		align-items: center; 
		margin: auto;
		border-radius: 10px;
		padding: 0 20rpx;
		height: 70px;
		margin-top:20rpx;
	}
   
</style>
